|
python 使用pyqt5框架，用手动拖动的方式，简单的实现左侧抽屉导航栏效果。
前言：
本来想实现网页版的左侧导航栏效果，但是网上搜索了很多资料，都没有找到，突发奇想，可以用简单的拖动方式来布局，利用选项卡控件和按钮，实现左侧抽屉导航栏效果。
最终的效果：
一、操作步骤：
1.新建一个主窗口；
2.拖动一个widget容器，作为背景控件；
3.再拖同样的3个子widget容器，作为主界面布局；
为了方便查看，先设置一下背景颜色。
说明：
1区域为顶部菜单栏
2区域为左侧导航栏
3区域为功能页面
4.选中1,2,3区域，并设置为栅格布局；
5.选中主界面布局widget，并设置为垂直布局；
6.调整好各个容器的最小、最大高度和宽度；
7.在2区域内拖一个Scroll Area容器，然后放入多个button按钮；
8.在3区域内防止一个选项卡控件，并将3设置为垂直布局；
9.设置完之后的效果：
10.往2区域拖入多个PushButton，设置最小和最大长宽，并设置2区域滚动控件为垂直布局，后续若需要增加PushButton，可以往里面拖入即可；
为了便于区分控件，我们需要给各个控件设置不同的名字，便于调用；
为了区分选项卡不同的界面，随意拖几个控件作区分；
二、编码：
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, QTabBar
import leftUI
class ClassLeftMenu(QMainWindow,leftUI.Ui_MainWindow):
def __init__(self):
super(ClassLeftMenu, self).__init__()
self.setupUi(self)
def connect_event(self):
# 隐藏所有的Tab widget页面
self.tabBar = self.tabWidget_Main.findChild(QTabBar)
self.tabBar.hide()
self.pushButton_1.clicked.connect(self.open1)
self.pushButton_2.clicked.connect(self.open2)
self.pushButton_3.clicked.connect(self.open3)
self.pushButton_4.clicked.connect(self.open4)
self.pushButton_5.clicked.connect(self.open5)
self.pushButton_6.clicked.connect(self.open6)
self.pushButton_7.clicked.connect(self.open7)
self.pushButton_8.clicked.connect(self.open8)
def open1(self):
self.tabWidget_Main.setCurrentIndex(0)
def open2(self):
self.tabWidget_Main.setCurrentIndex(1)
def open3(self):
self.tabWidget_Main.setCurrentIndex(2)
def open4(self):
self.tabWidget_Main.setCurrentIndex(3)
def open5(self):
self.tabWidget_Main.setCurrentIndex(4)
def open6(self):
self.tabWidget_Main.setCurrentIndex(5)
def open7(self):
self.tabWidget_Main.setCurrentIndex(6)
def open8(self):
self.tabWidget_Main.setCurrentIndex(7)
def open9(self):
self.tabWidget_Main.setCurrentIndex(8)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = ClassLeftMenu()
w.connect_event()
w.show()
sys.exit(app.exec_())
效果展示：
三、最终效果
上面的图没有内容，看起来视觉效果不是很清晰，填充素材+美化UI后再看一次；
最终的效果：
四、完整代码
import PyQt5.QtCore
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, QTabBar, QPushButton, QToolButton
import leftUI
class ClassLeftMenu(QMainWindow,leftUI.Ui_MainWindow):
def __init__(self):
super(ClassLeftMenu, self).__init__()
self.setupUi(self)
def connect_event(self):
# 隐藏所有的Tab widget页面
self.tabBar = self.tabWidget_Main.findChild(QTabBar)
self.tabBar.hide()
self.pushButton_1.clicked.connect(self.open1)
self.pushButton_2.clicked.connect(self.open2)
self.pushButton_3.clicked.connect(self.open3)
self.pushButton_4.clicked.connect(self.open4)
self.pushButton_5.clicked.connect(self.open5)
self.pushButton_6.clicked.connect(self.open6)
self.pushButton_7.clicked.connect(self.open7)
self.pushButton_8.clicked.connect(self.open8)
def open1(self):
self.tabWidget_Main.setCurrentIndex(0)
def open2(self):
self.tabWidget_Main.setCurrentIndex(1)
def open3(self):
self.tabWidget_Main.setCurrentIndex(2)
def open4(self):
self.tabWidget_Main.setCurrentIndex(3)
def open5(self):
self.tabWidget_Main.setCurrentIndex(4)
def open6(self):
self.tabWidget_Main.setCurrentIndex(5)
def open7(self):
self.tabWidget_Main.setCurrentIndex(6)
def open8(self):
self.tabWidget_Main.setCurrentIndex(7)
def open9(self):
self.tabWidget_Main.setCurrentIndex(8)
def setUserUIAndColors(self):
self.QPushButtonStyleSheet = '''
QPushButton {
border-radius:15px;
border:1px solid #FFFFFF;
background:LightGray;
background-color:transparent;}
QPushButton:hover {
border-radius:25px;
border-bottom:1px solid yellow;
background-color: #009ACD;
color: rgb(0, 0, 255);
background:#00FF7F;
background-color:transparent;}
QPushButton:hover:pressed {
border-radius:35px;
color: white;
background-color: #33ffff;
}
QToolButton {
border-radius:15px;
border:1px solid #FFFFFF;
color: #000000;
background:#33ffff;
background-color:transparent;}
QToolButton:hover {
border-radius:25px;
border-bottom:2px solid #F76677;
color: #0000ff;
background:#33ffff;}
QToolButton:pressed {
border-radius:35px;
color: white;
background-color: #33ffff;
}
QCheckBox::indicator:hover {
color: rgb(0, 0, 30);}
'''
app.setStyleSheet(self.QPushButtonStyleSheet) # 启用CSS效果
# self.widget_Main.setStyleSheet(self.QPushButtonStyleSheet) # 启用CSS效果
self.element = self.findChild(QToolButton)
# print('self.element={}'.format(self.element))
self.element.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
self.element = self.findChild(QPushButton)
# print('self.element={}'.format(self.element))
self.element.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
# self.widget_Main.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
# self.widget_1.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
# self.widget_2.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
# self.widget_3.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
self.tabWidget_Main.setStyleSheet("{}".format(self.QPushButtonStyleSheet))
# 首先设置无边框，其次设置背景透明
# 背景透明后，可以在整体后方添加一个有色Label标签
# 对该有色标签进行QSS圆角化！
w.setWindowFlag(PyQt5.QtCore.Qt.FramelessWindowHint) # 隐藏边框
w.setWindowOpacity(0.9) # 设置窗口透明度
w.setAttribute(PyQt5.QtCore.Qt.WA_TranslucentBackground) # 设置窗口背景透明,主窗口圆角效果必须配合此功能才能生效
self.setMouseTracking(True) # 鼠标跟踪
self.setStyleSheet("QWidget#widget_Main{border-radius: 15px;border: 1px solid #33ffcc;}") # 设置圆角
if __name__ == '__main__':
app = QApplication(sys.argv)
w = ClassLeftMenu()
w.setUserUIAndColors()
w.connect_event()
w.show()
sys.exit(app.exec_())
五、作者的话
1.本方法是作者在开发过程中自己摸索出来的，可能有更好的方法，此方法仅供参考；
2.界面设计比较粗糙，未做精心设计，仅供教程参考；
3.有任何问题欢迎讨论，欢迎大神指点；
|